<template>
    <div>
    <Header></Header>
    <Nav></Nav>
    <span class="headertitle">结题</span>
    <el-card class="box-card">
        <el-button type="primary">填写结题申请</el-button>
        <el-button type="primary">上传材料</el-button>
        <el-table
                  ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                <el-table-column type="selection" width="50"></el-table-column>
             <el-table-column prop="num1" label="课题编号" width="180" ></el-table-column>
             <el-table-column prop="num2" label="课题名称" width="600" ></el-table-column>
             <el-table-column prop="num3" label="负责人"></el-table-column>
             <el-table-column prop="num4" label="课题类别"></el-table-column>
             <el-table-column prop="num5" label="状态"></el-table-column>
             <el-table-column label="操作"><el-link type="primary" @click="dialogVisible = true">填写结题申请</el-link></el-table-column>
            </el-table>
    </el-card>
    <!-- 结题申请 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="20%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="结题方式">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结题时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.region2" style="width: 217px;"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    </div>
</template>

<script>
import Header from '../Header.vue'
import Nav from '../Nav.vue'
export default {
    data(){
        return {
          dialogVisible:false,
          tableData:[{
            num1:'KT20221222',
            num2:'《古猿人进化史》',
            num3:'张三',
            num4:'资助经费重点课题(A类)',
            num5:'待结题',
          }],
          form:{
            region:'',
            region2:'',
          }
        }
    },
    components:{
    Header,
    Nav
  },
  methods:{}
}
</script>

<style lang="less" scoped>
    .box-card{
        width: 91%;
        float: right;
        margin-right: 1%;
        margin-top: -44%;
    }
body{
  position: relative;
}
.headertitle{
  position: absolute;
  top: 0;
  z-index: 999;
  margin-top: 20px;
  margin-left: 180px;
  font-size: 18px;
}
</style>